<div id="controlWrap" class="control" [ngClass]="themeClass">
    <layout-header (childOuter)="themeChenge($event)"></layout-header>
    <div class="controlMain">
        <div nz-row>
            <div nz-col nzSpan="17">
                <div nz-row class="marqueeWrap">
                    <div nz-col nzSpan="7">
                        <div nz-row>
                            <div nz-col nzSpan="7">
                                <div class="marqueeTitle">安全生产天</div>
                            </div>
                            <div nz-col nzSpan="17">
                                <div class="marqueeCont noradius">
                                    <marquee onMouseOut="this.start()" onMouseOver="this.stop()">
                                        <span>{{titleName}} <em>{{kmsafeDays}}</em> 天</span>
                                        <span>电务段安全生产 <em>{{safeDaysTitle}}</em> 天</span>
                                    </marquee>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div nz-col nzSpan="10">
                        <div nz-row>
                            <div nz-col nzSpan="6">
                                <div class="marqueeTitle noradius">值班领导</div>
                            </div>
                            <div nz-col nzSpan="18" (click)="showLd(ldDetail)">
                                <div class="marqueeCont noradius">
                                    <span *ngFor="let data of zhibanList">
                                        {{data.dep}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        {{data.dis}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        {{data.dri}}
                                    </span>
                                </div>
                            </div>
                            <ng-template #ldDetail>
                                <div style="height: 500px;overflow-y: scroll;font-size: 18px;">
                                    <div nz-row style="padding: 5px">
                                        <div nz-col nzSpan="6" style="font-weight: bold;">
                                            <span>段安排</span>
                                        </div>
                                        <div nz-col nzSpan="18">
                                            <span>{{zhibanList2.duan.join('、')}}</span>
                                        </div>
                                    </div>
                                    <div nz-row style="padding: 5px">
                                        <div nz-col nzSpan="6" style="font-weight: bold;">
                                            <span>调度安排</span>
                                        </div>
                                        <div nz-col nzSpan="18">
                                            <span>{{zhibanList2.dd.join('、')}}</span>
                                        </div>
                                    </div>
                                    <div nz-row style="padding: 5px">
                                        <div nz-col nzSpan="6" style="font-weight: bold;">
                                            <span>司机安排</span>
                                        </div>
                                        <div nz-col nzSpan="18">
                                            <span>{{zhibanList2.sj.join('、')}}</span>
                                        </div>
                                    </div>
                                </div>
                            </ng-template>
                        </div>
                    </div>
                    <div nz-col nzSpan="7">
                        <div nz-row>
                            <div nz-col nzSpan="6">
                                <div class="marqueeTitle noradius">天气信息</div>
                            </div>
                            <div nz-col nzSpan="18">
                                <div class="marqueeCont">
                                    <marquee class="pointer" (click)="showTq(tqDetail)" onMouseOut="this.start()"
                                        onMouseOver="this.stop()">
                                        <span *ngFor="let data of tianqiList">{{data.name}}</span>
                                    </marquee>
                                    <ng-template #tqDetail>
                                        <div style="height: 500px;overflow-y: scroll;font-size: 18px;">
                                            <div nz-row>
                                                <div nz-col nzSpan="24">
                                                    <input nz-input [(ngModel)]="tqFilterText"
                                                        (ngModelChange)="tqFilter($event)" placeholder="输入文字进行筛选">
                                                </div>
                                            </div>
                                            <div nz-row *ngFor="let data of tianqiList_split" style="padding: 5px">
                                                <div nz-col nzSpan="6" style="font-weight: bold;">
                                                    <span>{{data[0]}}</span>
                                                </div>
                                                <div nz-col nzSpan="10">
                                                    <span>{{data[1]}}</span>
                                                </div>
                                                <div nz-col nzSpan="8">
                                                    <span>{{data[2]}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </ng-template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="gjtWrap">
                    <div style="position: absolute;right:10px;top:10px;">
                        <button nz-button nzType="primary" (click)="htips()"><i nz-icon
                                nzType="profile"></i>查看图例</button>
                    </div>
                    <div [innerHTML]="iframe" nz-popover nzContent="点击站点可查看明细" nzPlacement="top"></div>
                </div>
            </div>
            <div nz-col nzSpan="7">
                <!-- <div class="listWrap">
                    <div class="listTitle">
                        实时预警
                        <button nz-popover nzContent="查看实时预警明细" nzPlacement="left" (click)="detail('ssyj')" nz-button
                            nzType="primary">明细</button>
                    </div>
                    <div class="listCont" style="padding-bottom:5px">
                        <div class="listMenu">
                            <span>设备名称</span><span>车站</span><span>报警类型</span><span>报警开始时间</span>
                        </div>
                        <ul class="listRow" style="height: 200px;overflow-y:auto;" id="ssyjScroll">
                            <li *ngFor="let data of earlyWarningList;" (click)="yujingZoom(data)">
                                <a href="javascript:void(0)">
                                    <span class="red">{{data.dev}}</span>
                                    <span class="red">{{data.name}}</span>
                                    <span class="red" [title]="data.alarmtext">{{data.alarmtext}}</span>
                                    <span class="red">{{data.startime}}</span>
                                </a>
                            </li>
                        </ul>
                        <div style="padding-top:3px">
                            <nz-pagination nzSize="small" [nzPageSize]="pageSize" [nzPageIndex]="pageIndex"
                                [nzTotal]="pageTotal" (nzPageIndexChange)="pageChange($event)">
                            </nz-pagination>
                        </div>
                    </div>
                    <nz-modal [(nzVisible)]="ssyjVisible" nzMaskClosable="false" [nzTitle]="modalTitle_ssjy"
                        (nzOnCancel)="hideSsyjModal()" [nzFooter]="modalFooter_ssjy" nzWidth="600px"
                        [nzBodyStyle]='{ width: "600px", height: "300px" }'>
                        <ng-template #modalFooter_ssjy>
                            <button nz-button nzType="primary" (click)="hideSsyjModal()">确定</button>
                        </ng-template>
                        <ng-template #modalTitle_ssjy>
                            <span style="color: red;font-size: 20px;">实时报警</span>
                        </ng-template>

                        <div nz-row>
                            <div nz-col nzSpan="8" class="modal-lable2">
                                <span>车站：</span>
                            </div>
                            <div nz-col nzSpan="16" class="modal-value">
                                <span>{{impWarning.STATIONNAME}}</span>
                            </div>
                        </div>
                        <div nz-row>
                            <div nz-col nzSpan="8" class="modal-lable2">
                                <span>设备名称：</span>
                            </div>
                            <div nz-col nzSpan="16" class="modal-value">
                                <span>{{impWarning.DEVNAME}}</span>
                            </div>
                        </div>
                        <div nz-row>
                            <div nz-col nzSpan="8" class="modal-lable2">
                                <span>报警类型：</span>
                            </div>
                            <div nz-col nzSpan="16" class="modal-value">
                                <span>{{impWarning.ALARMTEXT}}</span>
                            </div>
                        </div>
                        <div nz-row>
                            <div nz-col nzSpan="8" class="modal-lable2">
                                <span>报警时间：</span>
                            </div>
                            <div nz-col nzSpan="16" class="modal-value">
                                <span>{{(impWarning.U_TIME*1000)|date:"yyyy-MM-dd"}}</span>
                            </div>
                        </div>
                    </nz-modal>
                </div> -->
                <div class="listWrap">
                    <div nz-row>
                        <div nz-col nzSpan="12">
                            <div style="margin:0 1px 2px 0;">
                                <div class="listTitle">
                                    当日施工
                                    <button nz-popover nzContent="查看当日施工明细" nzPlacement="left" (click)="detail('drsg')"
                                        nz-button nzType="primary">明细</button>
                                </div>
                                <div class="listCont">
                                    <div id="todayCracks" style="width:100%;height:220px;"></div>
                                    <div class="listChartText">
                                        <span *ngFor="let data of shigongText"
                                            [ngStyle]="{'color':data.color}">{{data.name}}: {{data.value}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div nz-col nzSpan="12">
                            <div style="margin:0 0 2px 1px;">
                                <div class="listTitle">
                                    当日维修
                                    <button nz-popover nzContent="查看当日维修明细" nzPlacement="left" (click)="detail('drwx')"
                                        nz-button nzType="primary">明细</button>
                                </div>
                                <div class="listCont">
                                    <div id="todayRepair" style="width:100%;height:220px;"></div>
                                    <div class="listChartText">
                                        <span *ngFor="let data of weixiuText"
                                            [ngStyle]="{'color':data.color}">{{data.name}}: {{data.value}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="listWrap">
                    <div nz-row>
                        <div class="listTitle">
                            月度天窗统计
                            <button nz-popover nzContent="查看月度天窗统计明细" nzPlacement="left" (click)="detail('cjtj')"
                                nz-button nzType="primary">明细</button>
                        </div>
                        <div class="listCont">
                            <div id="statistics" style="width:100%;height:260px;"></div>
                        </div>
                    </div>
                </div>
                <div class="listWrap">
                    <div class="listTitle">
                        督办追踪 <button nz-popover nzContent="查看实时预警明细" nzPlacement="left" (click)="detail('dbzz')"
                            nz-button nzType="primary">明细</button>
                    </div>
                    <div class="listCont">
                        <div class="listMenu">
                            <span style="width:25%">问题来源</span>
                            <span style="width:25%">问题发生时间</span>
                            <span style="width:50%">信息概况及整改要求</span>
                        </div>
                        <ul class="listRow" style="height: 205px;" id="wtxxScroll">
                            <li *ngFor="let data of dbzzList;index as i" (dblclick)="showDbzzModal('detail',i)"
                                nz-tooltip nzTooltipTitle="双击查看详情" nzTooltipPlacement="bottom" style="cursor:pointer">
                                <span style="width:25%">{{data.ARRANGE}}</span>
                                <span style="width:25%">{{data.CREATEDATE}}</span>
                                <span style="width:50%">{{data.DIANWAI}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <nz-modal [(nzVisible)]="htipsVisible" nzMaskClosable="false" [nzClassName]="popClass" nzWidth="1200" nzTitle="图例详情"
        (nzOnOk)="htipsOk()" (nzOnCancel)="htipsOk()">
        <div style="text-align: center;padding:5px 0;"><img style="max-width:1140px;" [src]="tipsPic"></div>
    </nz-modal>

    <nz-modal [(nzVisible)]="dbzzVisible" nzMaskClosable="false" [nzTitle]="dbzzTitleTemp" [nzClassName]="popClass"
        (nzOnCancel)="hideDbzzModal()" [nzFooter]="modalFooter_dbzz" nzWidth="1000px"
        [nzBodyStyle]='{ width: "1000px", height: "500px" }'>
        <ng-template #modalFooter_dbzz>
            <button nz-button nzType="primary" (click)="hideDbzzModal()" style="margin-right:20px">
                <i nz-icon nzType="save" nzTheme="outline"></i>
                确定
            </button>
        </ng-template>
        <ng-template #dbzzTitleTemp>
            <span class="titleFont">督办追踪详情</span>
            <span [ngStyle]="{'color': dbzzColor}" class="titleFont">{{dbzzTitle}}</span>
        </ng-template>

        <div class="listCont_modal" style="overflow: scroll;height:450px">
            <div nz-row>
                <div nz-col nzSpan="6" class="modal-lable">
                    <span>问题来源</span>
                </div>
                <div nz-col nzSpan="18" class="modal-value">
                    <span>{{dbzzRow.ARRANGE}}</span>
                </div>
            </div>
            <div nz-row>
                <div nz-col nzSpan="6" class="modal-lable">
                    <span>问题发生时间</span>
                </div>
                <div nz-col nzSpan="18" class="modal-value">
                    <span>{{dbzzRow.CREATEDATE}}</span>
                </div>
            </div>
            <div nz-row>
                <div nz-col nzSpan="6" class="modal-lable">
                    <span>信息概况及整改要求</span>
                </div>
                <div nz-col nzSpan="18" class="modal-value">
                    <span>{{dbzzRow.DIANWAI}}</span>
                </div>
            </div>
            <div nz-row>
                <div nz-col nzSpan="6" class="modal-lable">
                    <span>追踪要求</span>
                </div>
                <div nz-col nzSpan="18" class="modal-value">
                    <span>{{dbzzRow.IMP_TRACK_INFO}}</span>
                </div>
            </div>
            <div nz-row>
                <div nz-col nzSpan="6" class="modal-lable">
                    <span>追踪负责人</span>
                </div>
                <div nz-col nzSpan="18" class="modal-value">
                    <span>{{dbzzRow.DEP_ARRANGE}}</span>
                </div>
            </div>
            <div nz-row>
                <div nz-col nzSpan="6" class="modal-lable">
                    <span>追踪整改情况</span>
                </div>
                <div nz-col nzSpan="18" class="modal-value">
                    <span>{{dbzzRow.DIANWAI}}</span>
                </div>
            </div>
            <div nz-row>
                <div nz-col nzSpan="6" class="modal-lable">
                    <span>完成时限</span>
                </div>
                <div nz-col nzSpan="18" class="modal-value">
                    <span>{{dbzzRow.DUTY_DATESTR}}</span>
                </div>
            </div>
            <div nz-row>
                <div nz-col nzSpan="6" class="modal-lable">
                    <span>处理销号上报情况</span>
                </div>
                <div nz-col nzSpan="18" class="modal-value">
                    <span>{{dbzzRow.TIANCHUAN_INFO}}</span>
                </div>
            </div>
        </div>
    </nz-modal>

    <nz-modal [(nzVisible)]="dbzzpopVisible" nzMaskClosable="false" [nzClassName]="popClass" nzWidth="1200"
        nzTitle="督办追踪" (nzOnOk)="dbzzpopOk()" (nzOnCancel)="dbzzpopOk()">
        <nz-table #rowTable nzSize="small" [nzLoadingDelay]="1000" [nzShowPagination]="false"
            [nzFrontPagination]="false" [nzData]="dbzzList" nzBordered>
            <thead>
                <tr>
                    <th nzAlign="center" nzWidth="23%">问题来源</th>
                    <th nzAlign="center" nzWidth="12%">问题发生时间</th>
                    <th nzAlign="center">信息概况及整改要求</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of rowTable.data;index as i" (dblclick)="showDbzzModal('list',i)" nz-tooltip
                    nzTooltipTitle="双击查看详情" nzTooltipPlacement="bottom" style="cursor:pointer">
                    <td>{{data.ARRANGE}}</td>
                    <td nzAlign="center">{{data.CREATEDATE}}</td>
                    <td>{{data.DIANWAI}}</td>
                </tr>
            </tbody>
        </nz-table>
        <!-- <div class="pagination">
            <nz-pagination (nzPageIndexChange)="rowChange($event)" [nzPageIndex]="page" [nzTotal]="alarmTotal"
                [nzPageSize]="limit"></nz-pagination>
        </div> -->
    </nz-modal>

    <!-- 报警声音 -->
    <audio *ngIf="alarmAudio" src="./assets/alarmaudio.mp3" loop="loop" autoplay="autoplay"></audio>

</div>